.container {
  min-height: calc(100vh - 18.75rem);
}

.classify {
  @apply flex mt-4 mx-auto mb-0 flex justify-between flex-wrap text-xl;
  width: 7.75rem;
  line-height: 1.875rem;
  color: rgba(255, 255, 255, 0.6);

  .item {
    @apply cursor-pointer;
  }

  .itemActive {
    @apply text-theme;
  }
}

.date {
  @apply flex justify-center mt-7;

  .item {
    @apply cursor-pointer rounded text-sm leading-5 flex flex-col justify-between items-center;
    width: 8rem;
    height: 3.5rem;
    color: #a1a1a1;
    padding: 0.375rem 0;
  }

  .itemActive {
    @apply bg-theme text-white;
  }
}

.channels {
  @apply mt-4 w-full flex px-4 overflow-x-auto;
  scrollbar-width: 0;

  &::-webkit-scrollbar {
    @apply w-0 h-0;
  }

  .item {
    @apply text-sm shrink-0 cursor-pointer text-white-60;
    text-decoration: none;
    margin-right: 1.375rem;
  }

  .itemActive {
    @apply text-theme;
  }
}

.line {
  @apply w-full mt-5 relative;
  height: 0.0625rem;
  border-top: 0.0625rem solid #333;
  height: 2.3125rem;
  z-index: 0;

  .bg {
    @apply absolute left-2/4 top-0 h-9;
    min-width: 8.75rem;
    transform: translateX(-50%);

    .h2 {
      @apply absolute whitespace-nowrap left-2/4 top-2/4 text-base text-white-60;
      transform: translate(-50%, -50%);
    }

    & img {
      @apply h-9;
      width: 8.75rem;
    }
  }
}

.classifyMain {
  @apply flex;

  .left {
    @apply w-40 overflow-y-auto;
    margin-top: -1rem;
    max-height: 51.8125rem;
    margin-right: 3.5rem;
    scrollbar-width: 0;

    .item {
      @apply block w-40 cursor-pointer;
      background-color: #272727;
      height: 5.625rem;

      & > img {
        @apply w-full h-full;
      }
    }

    .itemActive {
      @apply bg-transparent;
    }
  }

  .left::-webkit-scrollbar {
    @apply w-0 h-0;
  }

  .right {
    @apply flex-1;

    .item {
      @apply mb-7 w-full flex text-lg justify-between;
      min-height: 2.25rem;
      line-height: 1.875rem;
      color: rgba(255, 255, 255, 0.8);

      .time {
        @apply inline-block;
        min-width: 3.0625rem;
        margin-right: 5.5625rem;
      }

      .btn {
        @apply h-9 w-11 border-0 text-sm outline-0;
        border-radius: 1.875rem;
        background-color: #262626;
        color: rgba(255, 255, 255, 0.6);
      }

      .btnLive {
        @apply bg-transparent flex justify-center items-center text-base text-theme;

        .liveIcon {
          @apply w-5 h-3 relative flex items-end justify-center mr-1;

          & span {
            @apply inline-block;
            width: 0.125rem;
            height: 0.4375rem;
            background-color: #ff7c44;
            animation: line-animation 1.5s ease-in-out infinite;
          }

          & span:not(:first-child) {
            margin-left: 0.1875rem;
          }

          & span:nth-child(2) {
            @apply h-3;
            left: 0.5625rem;
            animation-delay: 0.25s;
          }

          & span:last-child {
            height: 0.3125rem;
            animation-delay: 0.5s;
            left: 0.875rem;
          }

          @keyframes line-animation {
            0% {
              height: 10%;
            }

            50% {
              height: 90%;
            }

            100% {
              height: 10%;
            }
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .datePhone {
    @apply my-5 mx-0 w-full px-4 flex-nowrap justify-start overflow-x-auto;
    scrollbar-width: 0rem;

    &::-webkit-scrollbar {
      @apply w-0 h-0;
    }

    .item {
      @apply w-20 shrink-0;
      height: 2.875rem;

      p {
        @apply text-sm;
        line-height: 0.875rem;
      }

      time {
        @apply text-xs;
        line-height: 0.75rem;
      }
    }
  }

  .classifyMain {
    .rightPhone {
      @apply w-full px-4;

      .item {
        @apply text-base;

        .time {
          @apply mr-8;
        }

        .btn {
          @apply w-fit shrink-0 bg-transparent;
        }
      }
    }
  }
}
